<template>
  <vxe-grid
    :class="{ dark: isDark }"
    ref="gridTable"
    :border="border"
    :size="size === 'default' ? 'small' : size === 'small' ? 'mini' : size === 'large' ? 'medium' : ''"
    :row-config="{ isCurrent: true, isHover: true, keyField: rowId }"
    show-header-overflow
    show-overflow
    :height="height"
    :data="gridOptions.data"
    :columns="gridOptions.columns"
    :column-config="{ resizable: true }"
    :seq-config="{ startIndex: (tablePage.pageIndex - 1) * tablePage.pageSize }"
    :tree-config="{ transform: true, rowField: treeConfig.childId, parentField: treeConfig.parentId }"
    @cell-click="cellClick"
    @cell-dblclick="cellDblclick"
    @checkbox-change="checkboxChange"
    @checkbox-all="checkboxAll"
    @checkbox-range-end="checkboxRangeEnd"
  >
    <!-- 分页 -->
    <template #pager>
      <vxe-pager
        v-if="tablePage.showPage"
        :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        v-model:current-page="tablePage.pageIndex"
        v-model:page-size="tablePage.pageSize"
        :total="tablePage.total"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </template>
  </vxe-grid>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch, computed, toRefs } from "vue";
import { VxeGridProps, VxeGridListeners, VxePagerEvents, VxeGridPropTypes, VxeGridInstance } from "vxe-table";
import { useGlobalStore } from "@/stores/modules/global";
export default defineComponent({
  props: {
    height: {
      type: String || Number,
      default: () => {
        return "auto";
      }
    },
    border: {
      type: Boolean || String,
      default: ""
    },
    tablePage: {
      type: Object,
      default: () => {
        return {
          showPage: false,
          pageIndex: 1,
          pageSize: 10,
          total: 0
        };
      }
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rowId: {
      type: String,
      default: "_X_ROW_KEY"
    },
    treeConfig: {
      type: Object,
      default: () => {
        return {
          childId: "Dept_ID",
          parentId: "Dept_Father"
        };
      }
    }
  },
  emits: ["rowClick", "rowdblClick", "selectionChange", "pageChange"],
  setup(props, context) {
    const globalStore = useGlobalStore();
    const isDark = computed(() => (globalStore.isDark ? "dark" : ""));
    const size = computed<any>(() => globalStore.assemblySize);
    const gridTable = ref({} as VxeGridInstance);
    //vxt-table配置
    const gridOptions: VxeGridProps = reactive({
      columns: props.columns as VxeGridPropTypes.Columns,
      data: props.data as any
    });
    let timer: any;
    // 表格事件
    const gridEvents: VxeGridListeners = {
      // 单击事件
      cellClick({ row, rowIndex, column }) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          // 筛除多选时单击触发操作
          if (!column.field) {
            return;
          }
          context.emit("rowClick", { row, rowIndex });
        }, 200);
      },
      // 双击事件
      cellDblclick({ row, rowIndex, column }) {
        clearTimeout(timer);
        // 筛除多选时单击触发操作
        if (!column.field) {
          return;
        }
        context.emit("rowdblClick", { row, rowIndex });
      },
      // 勾选
      checkboxChange({ checked }) {
        context.emit("selectionChange", getCheckboxRecords());
      },
      // 全部勾选
      checkboxAll({ checked }) {
        context.emit("selectionChange", getCheckboxRecords());
      },
      // 快捷勾选
      checkboxRangeEnd({ checked }) {
        context.emit("selectionChange", getCheckboxRecords());
      }
    };
    // 分页事件
    const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
      props.tablePage.pageIndex = currentPage;
      props.tablePage.pageSize = pageSize;
      context.emit("pageChange", { pageIndex: currentPage, pageSize });
    };
    // 获取所有勾选项
    const getCheckboxRecords = () => {
      return gridTable.value.getCheckboxRecords();
    };
    // 监听表格数据变化
    watch(
      () => props.data,
      (newValue, oldValue) => {
        gridOptions.data = newValue;
      }
    );

    return {
      isDark,
      gridOptions,
      gridTable,
      size,
      ...gridEvents,
      handlePageChange,
      getCheckboxRecords
    };
  }
});
</script>

<style lang="scss">
@import "@/styles/vxe-table.scss";
</style>
